
<style>
	#table-lotterylist th.op {
		min-width: 100px;
	}
</style>

<div id="main-wrapper">
	
	<h1>
		<i class="glyphicon glyphicon-th"></i>抽奖管理
	</h1>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs">
		<li>
			<a class="ex-link" href="#tab-list" data-toggle="tab">抽奖列表</a>
		</li>
		<li>
			<a class="ex-link" href="#tab-add" data-toggle="tab">添加抽奖</a>
		</li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div class="tab-pane active" id="tab-list">
			<table id="table-lotterylist" class="table table-striped">
				<thead>
				<tr>
					<th class="long">抽奖</th>
					<th>状态</th>
					<th class="op">操作</th>
				</tr>
				</thead>
				<tbody>
                    <script type="text/html" id= "tr-tmpl">
                        <tr>
                            <td><%- content %></td>
                            <td><%- state %></td>
                            <td>
                                <a href="#/viewlottery?lyid=<%- lyid %>">详情</a>
                                &nbsp;&nbsp;
                                <a data-lyid="<%- lyid %>"class="ex-link dellottery">删除</a>
                            </td>
                        </tr>
                    </script>
				</tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <script type="text/html" id="pagin-tmpl">
                                <ul class="pagination">
                                    <li>
                                        <a onclick="updateLotteryList(1)">&laquo;</a>
                                    </li>
                                    <% if (current > 2) { %>
                                    <li class="disabled">
                                        <a>..</a>
                                    </li>
                                    <% } %>
                                    <% if (prev) { %>
                                    <li>
                                        <a onclick="updateLotteryList(<%- prev %>)"><%- prev %></a>
                                    </li>
                                    <% } %>
                                    <li class="active">
                                        <a onclick="updateLotteryList(<%- current %>)"><%- current %></a>
                                    </li>
                                    <% if (next) { %>
                                    <li>
                                        <a onclick="updateLotteryList(<%- next %>)"><%- next %></a>
                                    </li>
                                    <% } %>
                                    <% if (current < (count - 1)) { %>
                                    <li class="disabled">
                                        <a>..</a>
                                    </li>
                                    <% } %>
                                    <li>
                                        <a onclick="updateLotteryList(<%- count %>)">&raquo;</a>
                                    </li>
                                </ul>
                            </script>
                        </td>
                    </tr>
                </tfoot>
			</table>
		</div>
		<div class="tab-pane" id="tab-add">
			<form id="form-add">
				<div class="form-group">
					<textarea class="form-control" rows="3" name="content" placeholder="奖项详情"></textarea>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="num" placeholder="人数 (请输入数字)">
				</div>
				<button type="submit" class="btn btn-primary btn-lg btn-block">
					添加抽奖
				</button>
			</form>
		</div>
	</div>
</div>

<script>
	var $tableList = $('#table-lotterylist'),
		$tbody = $tableList.find('tbody'),
		$formAdd = $('#form-add'),
		$inputNum = $('[name="num"]'),
        trTmpl = _.template($tbody.find('#tr-tmpl').html()),
        $paginTmpl = $tableList.find('#pagin-tmpl'),
        paginTmpl = _.template($paginTmpl.html());

	$('.nav-tabs a').click(function (e) {
		e.preventDefault();
		updateLotteryList(1);
		$(this).tab('show');
	}).first().tab('show');

	$formAdd.ajaxForm({
		type: 'post',
		url: '/do/s/addlottery',
		success: function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		}
	});

	$tbody.delegate('a.dellottery', 'click', function(ev){
		var $a = $(this),
			lyid = parseInt($a.attr('data-lyid'));
		$.get('/do/s/dellottery?lyid=' + lyid, function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		});
	});

	updateLotteryList(1);

	function updateLotteryList(page) {
		$.get('/do/s/lotterylist', {
            page: page
        }, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
            var total = resObj['total'],
                lotteryList = resObj['lotteryList'];
			if (! lotteryList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="3">没有记录</td>',
					'</tr>'
				].join(''));
			}
			$tbody.html(_.reduce(lotteryList, function(memo, lottery){
				return memo + trTmpl({
                    lyid:lottery.id,
                    content: lottery.content,
                    state: lottery['state'] === 'active' ? '已结束' : '未开始'
                });
			}, ''));
            // pagination
            var count = Math.ceil(total / pageSize);
            $paginTmpl.next().remove();
            $paginTmpl.after(paginTmpl({
                current: page,
                prev: page > 1 ? page - 1 : null,
                next: page < count ? page + 1 : null,
                count: count
            }));
		});
	}
	// 限制输入为数字
	$inputNum.on('input', function(){
		if (! /^\d*$/.test($inputNum.val())) {
			$inputNum.val($inputNum.data('text'));
		} else {
			$inputNum.data('text', $inputNum.val());
		}
	}).data('text', $inputNum.val());
</script>



